import React from 'react'
import { useQuery } from '@tanstack/react-query'
import { Play, ChevronRight } from 'lucide-react'
import { taskApi, suiteApi } from '../services/api'
import { cn } from '../utils/cn'

const Sidebar = ({ tabs, activeTab, onTabChange, selectedItem, onItemSelect }) => {
  // 获取任务列表
  const { data: tasks = [] } = useQuery({
    queryKey: ['tasks'],
    queryFn: () => taskApi.getTasks().then(res => res.data),
    enabled: activeTab === 'execution' || activeTab === 'tasks'
  })

  // 获取套件列表
  const { data: suites = [] } = useQuery({
    queryKey: ['suites'],
    queryFn: () => suiteApi.getSuites().then(res => res.data),
    enabled: activeTab === 'execution' || activeTab === 'suites'
  })

  const renderQuickActions = () => {
    if (activeTab !== 'execution') return null

    const allItems = [
      ...tasks.map(task => ({ ...task, type: 'task' })),
      ...suites.map(suite => ({ ...suite, type: 'suite' }))
    ]

    if (allItems.length === 0) {
      return (
        <div className="p-4">
          <p className="text-sm text-gray-500 text-center">
            暂无可执行的任务或套件
          </p>
        </div>
      )
    }

    return (
      <div className="p-4">
        <h3 className="text-sm font-semibold text-gray-900 mb-3">
          快速执行
        </h3>
        <div className="space-y-2">
          {allItems.slice(0, 10).map((item) => (
            <button
              key={`${item.type}-${item.filename}`}
              onClick={() => onItemSelect(item)}
              className={cn(
                "w-full flex items-center justify-between p-3 text-left rounded-lg border transition-all",
                selectedItem?.filename === item.filename && selectedItem?.type === item.type
                  ? "border-primary-300 bg-primary-50 shadow-sm"
                  : "border-gray-200 hover:border-gray-300 hover:bg-gray-50"
              )}
            >
              <div className="flex-1 min-w-0">
                <div className="flex items-center space-x-2">
                  <div className={cn(
                    "w-2 h-2 rounded-full",
                    item.type === 'task' ? "bg-blue-500" : "bg-green-500"
                  )} />
                  <span className="text-sm font-medium text-gray-900 truncate">
                    {item.name}
                  </span>
                </div>
                <p className="text-xs text-gray-500 mt-1 truncate">
                  {item.type === 'task' ? '任务' : '套件'} • {item.filename}
                </p>
              </div>
              
              <div className="flex items-center space-x-2 ml-2">
                {selectedItem?.filename === item.filename && selectedItem?.type === item.type && (
                  <div className="flex items-center">
                    <Play className="w-4 h-4 text-blue-600" />
                  </div>
                )}
                <ChevronRight className="w-4 h-4 text-gray-400" />
              </div>
            </button>
          ))}
        </div>
        
        {allItems.length > 10 && (
          <p className="text-xs text-gray-500 mt-3 text-center">
            还有 {allItems.length - 10} 个项目...
          </p>
        )}
      </div>
    )
  }

  return (
    <aside className="w-80 bg-white border-r border-gray-200 flex flex-col">
      {/* 导航标签 */}
      <div className="p-4 border-b border-gray-200">
        <nav className="space-y-1">
          {tabs.map((tab) => {
            const Icon = tab.icon
            const isActive = activeTab === tab.id
            
            return (
              <button
                key={tab.id}
                onClick={() => onTabChange(tab.id)}
                className={cn(
                  "w-full flex items-center px-3 py-2 text-sm font-medium rounded-lg transition-colors",
                  isActive
                    ? "bg-blue-100 text-blue-700 border border-blue-200"
                    : "text-gray-700 hover:bg-gray-100 hover:text-gray-900"
                )}
              >
                <Icon className="w-5 h-5 mr-3" />
                <div className="flex-1 text-left">
                  <div>{tab.name}</div>
                  {isActive && (
                    <div className="text-xs text-primary-600 mt-0.5">
                      {tab.description}
                    </div>
                  )}
                </div>
              </button>
            )
          })}
        </nav>
      </div>

      {/* 动态内容区域 */}
      <div className="flex-1 overflow-y-auto scrollbar-thin">
        {renderQuickActions()}
      </div>

      {/* 底部信息 */}
      <div className="p-4 border-t border-gray-200 bg-gray-50">
        <div className="text-center">
          <p className="text-xs text-gray-500">
            LMTester v1.0.0
          </p>
          <p className="text-xs text-gray-400 mt-1">
            AI驱动的Web自动化测试
          </p>
        </div>
      </div>
    </aside>
  )
}

export default Sidebar